<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-31 14:32:02
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-11-01 11:21:48
 * @FilePath: \vue-project\src\components\Vue3Map\AmapMap.vue
 * @Description: 
 * 
-->
<template>
  <div id="map"></div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { ref, onMounted } from 'vue'

const map = ref('')

onMounted(() => {
  initMap()
})
const initMap = () => {
  AMapLoader.load({
    key: window._CONFIG.AMAP_KEY, // 高德地图API Key
    version: '2.0', // 指定API版本
    plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'] // 需要使用的插件
  })
    .then((AaMap) => {
      map.value = new AaMap.Map('map', {
        zoom: 11, // 初始缩放级别
        center: [116.397428, 39.90923] // 初始中心点坐标
      })
    })
    .catch((e) => {
      console.error(e)
    })
}
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>